<!DOCTYPE html>
<html>
<head>
    {include file="_Fragment/meta" /}
    <link rel="stylesheet" href="/static/pear/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/static/pear/admin/css/other/console1.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                帖子详情
            </div>
            <div class="layui-card-body">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">话题类型</label>
                        <div class="layui-input-block">
                            <input type="text" value="{$inf.type_name}" disabled autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">发布人</label>
                        <div class="layui-input-block">
                            <input type="text" value="{$inf.username}" disabled autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">内容</label>
                        <div class="layui-input-block">
                            <textarea class="layui-textarea" disabled style="width: 600px">{$inf.content}</textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">@的人</label>
                        <div class="layui-input-block">
                        <textarea class="layui-textarea" disabled style="width: 600px">
                            {volist name="inf.relation_user" id="vo"}
                            @{$vo.name}({$vo.userid})
                            {/volist}
                        </textarea>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                图片或视频
            </div>
            <div class="layui-card-body">
                {empty name="inf['midea']"}
                <div class="layui-none" style="text-align: center">无数据</div>
                {else /}
                {eq name="inf['midea']['type']" value="img"}
                <div class="layui-carousel" id="carousel-img">
                    <div carousel-item="">
                        {volist name="inf['midea']['paths']" id="v"}
                        <div><img src="{$v}"></div>
                        {/volist}
                    </div>
                </div>
                {/eq}
                {eq name="inf['midea']['type']" value="video"}
                <div class="layui-form-item">
                    <label class="layui-form-label">视频</label>
                    <div style="overflow:hidden">
                        <div style="width:350px;height:240px;float:left;">
                            <video id="video" src="{$inf['midea']['path']}" controls="controls" height="240" width="350">您的浏览器不支持。</video>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">视频封面</label>
                    <div style="overflow:hidden;position: relative;">
                        <img id="coverImg" src="{$inf['midea']['img']}" style="width:350px;height:240px;float:left; margin-left:10px;">
                    </div>
                </div>
                {/eq}
                {/empty}
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                话题数据
            </div>
            <div class="layui-card-body">
                <table id="user-table"></table>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                评论数据
            </div>
            <div class="layui-card-body">
                <table id="comment-table"></table>
            </div>
        </div>
    </div>
</div>
<!--</div>-->
<script type="text/html" id="user-bar">
    <button class="pear-btn pear-btn-sm" id="more_{{d.id}}"><i class="layui-icon layui-icon-triangle-d"></i></button>
</script>

<script type="text/html" id="comment-bar">
    <button class="pear-btn pear-btn-sm" id="comment_more_{{d.id}}"><i class="layui-icon layui-icon-triangle-d"></i></button>
</script>
{include file="_Fragment/javascript" /}
<script>

    layui.use(['layer', 'element', 'form' , 'table', 'carousel', 'jquery', 'common', 'dropdown'], function() {
        var $ = layui.jquery,
            layer = layui.layer,
            element = layui.element,
            common = layui.common,
            form = layui.form,
            table = layui.table,
            table1 = layui.table,
            dropdown = layui.dropdown,
            carousel = layui.carousel;

        let id = '{$id}';
        //图片轮播
        carousel.render({
            elem: '#carousel-img'
            ,width: '778px'
            ,height: '460px'
            ,interval: 3000
            ,anim: 'fade'
        });
            let cols = [
                [
                    {
                        title: '数据名',
                        field: 'name',
                        align: 'center'
                    },
                    {
                        title: '数量',
                        field: 'total',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        toolbar: '#user-bar',
                        align: 'center'
                    }
                ]
            ]

        table.render({
            elem: '#user-table',
            url: '/Topic/getTotalList?id='+id,
            page: false,
            cols: cols,
            //skin: 'line'
            done: function(res, curr, count) {
                for (var i = 0; i < res.data.length; i++) {
                    dropdown.render({
                        elem: '#more_' + res.data[i].id,
                        data: [{
                            title: '详情',
                            id: res.data[i].id,
                            type: 1,
                            type1: res.data[i].type,
                        }, {
                            title: '导出',
                            id: res.data[i].id,
                            type: 2,
                            type1: res.data[i].type,
                        }],
                        id: '#more_' + res.data[i].id,
                        click: function(obj) {
                            if (obj.type == 1) {
                                layer.open({
                                    type: 2,
                                    title: '详情',
                                    shade: 0.1,
                                    area: [common.isModile()?'100%':'900px', common.isModile()?'100%':'600px'],
                                    content: '/Topic/logs?id='+id+'&type='+obj.type1
                                });
                            } else if(obj.type == 2) {
                                layer.confirm('确定要导出数据吗?', {
                                    icon: 3,
                                    title: '提示'
                                }, function(index) {
                                    layer.close(index);
                                    window.open("{:url('exportTotal')}?id="+id+"&type="+obj.type1, "_blank");
                                });
                            }
                        }
                    });
                }
            }
        });


        let cols1 = [
            [
                {
                    title: 'ID',
                    field: 'id',
                    align: 'center'
                },
                {
                    title: '评论内容',
                    field: 'content',
                    align: 'center'
                },
                {
                    title: '赞',
                    field: 'zan',
                    align: 'center'
                },
                {
                    title: '评论人',
                    field: 'username',
                    align: 'center'
                },
                {
                    title: '时间',
                    field: 'add_time2',
                    align: 'center'
                },
                {
                    title: '操作',
                    toolbar: '#comment-bar',
                    align: 'center'
                }
            ]
        ]

        table1.render({
            elem: '#comment-table',
            url: '/Topic/getCommentList?id='+id,
            page: false,
            cols: cols1,
            //skin: 'line'
            done: function(res, curr, count) {
                for (var i = 0; i < res.data.length; i++) {
                    dropdown.render({
                        elem: '#comment_more_' + res.data[i].id,
                        data: [{
                            title: '查看回复',
                            id: res.data[i].id,
                            type: 1,
                        },{
                            title: '删除',
                            id: res.data[i].id,
                            type: 2,
                        }],
                        id: '#comment_more_' + res.data[i].id,
                        click: function(obj) {
                            if (obj.type == 1) {
                                layer.open({
                                    type: 2,
                                    title: '回复详情',
                                    shade: 0.1,
                                    area: [common.isModile()?'100%':'900px', common.isModile()?'100%':'600px'],
                                    content: '/Topic/show?id='+obj.id
                                });
                            } else if(obj.type == 2) {
                                layer.confirm('确定要删除评论吗?', {
                                    icon: 3,
                                    title: '提示'
                                }, function(index) {
                                    layer.close(index);
                                    let loading = layer.load();
                                    $.ajax({
                                        url: "/Topic/deleteComment",
                                        data:{id:obj.id},
                                        dataType: 'json',
                                        type: 'post',
                                        success: function(result) {
                                            layer.close(loading);
                                            if (result.status == 0) {
                                                layer.msg(result.msg, {
                                                    icon: 1,
                                                    time: 1000
                                                }, function() {
                                                    table.reload('comment-table');
                                                });
                                            } else {
                                                layer.msg(result.msg, {
                                                    icon: 2,
                                                    time: 1000
                                                });
                                            }
                                        }
                                    })
                                });
                            }
                        }
                    });
                }
            }
        });

    });
</script>
</body>
</html>
